SlideShow trình chiếu ảnh với hiệu ứng tuyệt đẹp cho blogspot /website

Hướng dẫn chèn code slideshow trình chiếu ảnh vào blogspot:

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> Nhấn tổ hợp phím Ctrl F và tìm đến thẻ ]]></b:skin sau đó dán đoạn CSS sau lên phía trên

img{max-width:100%}
.sliderz-wrapper{overflow:hidden;width:100%;max-width:1340px;max-height:400px;margin:auto;position:relative;margin-bottom:20px}
.sliderz-entry-list-wrapper{position:relative;width:100%;height:0;padding-top:30%;left:0;transition:.5s all cubic-bezier(0.78,-0.1,0.58,1)}
.sliderz-entry-list{display:flex;justify-content:space-around;position:absolute;width:100%;height:100%;top:0;left:0}
.sliderz-entry{width:33%;height:100%;box-sizing:border-box}
.sliderz-preview-img{width:100%;height:100%}
.sliderz-prev,.sliderz-next{width:50px;height:100%;position:absolute;z-index:2;opacity:.1;transition:.5s all ease-out;cursor:pointer}
.sliderz-next{right:-20px;top:0}
.sliderz-wrapper:hover .sliderz-prev,.sliderz-wrapper:hover .sliderz-next{opacity:1}
.sliderz-prev-btn,.sliderz-next-btn{font-size:40px;position:absolute;top:46%;width:50px;height:50px;z-index:3;color:#fff;transition:.5s all ease-out}
.sliderz-wrapper .sliderz-prev-btn{left:-30px}
.sliderz-wrapper .sliderz-next-btn{right:-30px}
.sliderz-wrapper:hover .sliderz-prev-btn{left:10px}
.sliderz-wrapper:hover .sliderz-next-btn{right:10px}
.sliderz-pick{position:absolute;top:10px;right:10px;display:flex}
.sliderz-pick > .sliderz-number{width:14px;height:14px;margin:4px;background:rgba(255,255,255,0.78);display:block;border-radius:50%;cursor:pointer;transition:.5s all ease-out}
.sliderz-pick > .sliderz-number:hover,.sliderz-pick > .sliderz-number.open{background:#f5003a}

Bước 2: Để hiển thị Slider này bạn sử dụng đoạn Code sau và dán vào nơi muốn hiển thị

<div class="sliderz-wrapper">
<div class="sliderz-prev" onclick="sliderz_goto(-1)"><i class="fa fa-chevron-left sliderz-prev-btn" aria-hidden="true"></i></div>
<div class="sliderz-entry-list-wrapper"><div class="sliderz-entry-list"></div></div>
<div class="sliderz-next" onclick="sliderz_goto(-2)"><i class="fa fa-chevron-right sliderz-next-btn" aria-hidden="true"></i></div>
<div class="sliderz-pick"></div>
</div>
<script>
var slider_entry = [
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"]
];

var slider_width = 100; // Chiều rộng slide (%)
var sliderz_time = 2000; // Thời gian chuyển slide (s)
  
var entry = "",pick="", slider_entry_len = slider_entry.length;
for (var i = slider_entry_len-1; i>=0; i--)
{
  entry += '<div class="sliderz-entry" style="width:'+100/slider_entry_len+'%"><a class="sliderz-preview" href="'+slider_entry[i][1]+'" target="_blank"><img class="sliderz-preview-img" src="'+slider_entry[i][2]+'" alt="'+slider_entry[i][0]+'"/></a></div>';
  pick = '<span class="sliderz-number" data-slide-number='+i+' onclick="sliderz_goto(event)"></span>'+pick;
}
var slider_entry_wrapper = document.getElementsByClassName("sliderz-entry-list-wrapper")[0];
slider_entry_wrapper.style.width = slider_entry_len*slider_width + '%';
document.getElementsByClassName("sliderz-entry-list")[0].innerHTML = entry;
document.getElementsByClassName("sliderz-pick")[0].innerHTML = pick;

var slider_wrapper = document.getElementsByClassName("sliderz-wrapper")[0];
var sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);
slider_wrapper.addEventListener("mouseenter", function(){clearInterval(sliderz_timer);});
slider_wrapper.addEventListener("mouseleave", function(){sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);});

var sliderz_goto = (function () {
 var slider_ctrl = document.getElementsByClassName("sliderz-entry-list-wrapper")[0];
 var curpos = 0, range = slider_entry_len, slider_wid=slider_width;
 var pickls = document.getElementsByClassName("sliderz-number");
 return function(pos)
 {
  if (pos==event) curpos = pos.target.dataset.slideNumber;
  else if (pos==-1) { curpos = --curpos%range; curpos=curpos<0?range-1:curpos; }
  else if (pos==-2) curpos = ++curpos%range;
  slider_ctrl.style.left = -curpos*slider_wid+"%";
  for (var i = pickls.length-1; i>=0; i--) pickls[i].classList.remove("open");
  pickls[curpos].classList.add("open");
 }
})();
slider_entry = ""; entry = ""; slider_entry_wrapper = ""; slider_wrapper = ""; pick = "";
slider_width = 0; slider_entry_len=0;
</script>

CHỈNH SỬA:

title ảnh: tên của ảnh
Link tới: Link hoặc đường dẫn
Link ảnh: Linh ảnh sử dụng định dạng JPG, PNG,…
Chiều rộng slide (%): Phần trăm
Thời gian chuyển slide (s): Giây

Để thêm một slide ảnh nữa bạn thêm một code sau vào cùng chỗ title ảnh, link ảnh,…
[“title ảnh”,”Link tới”,”Link ảnh”],

KẾT LUẬN
Chỉ với vài bước đơn giản bạn đã có một slide trình chiếu ảnh tuyệt đẹp cho website/blog của bạn. Chúc bạn thành công!